<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>component based translation</title>
    <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../dist/vue-i18n.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ $t("message.hello") }}</p>
      <component1></component1>
    </div>
    <script>
      Vue.use(VueI18n)

      var i18n = new VueI18n({
        locale: 'ja',
        messages: {
          en: {
            message: {
              hello: 'hello world',
              greeting: 'good morning, world!'
            }
          },
          ja: {
            message: {
              hello: 'こんにちは、世界',
              greeting: 'おはよう、世界！'
            }
          }
        }
      })

      var Component1 = {
        template: '<div class="container">' +
          '<p>Component1 locale messages: {{ $t("message.hello") }}</p>' +
          '<p>Fallback global locale messages: {{ $t("message.greeting") }}</p>' +
          '</div>',
        i18n: {
          messages: {
            en: { message: { hello: 'hello component1' } },
            ja: { message: { hello: 'こんにちは、component1' } }
          }
        }
      }
      
      new Vue({
        i18n: i18n,
        components: {
          component1: Component1
        }
      }).$mount('#app')
    
    </script>
  </body>
</html>
